 /* 渲染商品详情页 */
 class List {
     constructor() {
         this.center = document.querySelector(".center");
         this.url = "http://localhost:3000/data/goodsdetails.json";
         this.load();
         this.id = (location.href.split("?")[1]);

         // 1. 绑定按钮的点击事件
         // this.addEvent()
     }
     load() {
         ajax({
             url: this.url,
             success: (res) => {
                 this.res = JSON.parse(res).msg;
                 this.render();
             }
         })
     }
     render() {
         let str = "";
         for (let j = 0; j < this.res.length; j++) {
             if (this.res[j].id == this.id) {

                 console.log(this.res);
                 str += `<div class="s_box">
            <img src="${this.res[j].smallimgSrc}"
                alt="">
            <span></span>
        </div>
        <div class="b_box">
            <img src="${this.res[j].bigimgSrc}"
                alt="">
        </div>
        <div class="center-word">
            <p>
            ${this.res[j].proName}
            </p>
            <p>${this.res[j].price}</p>
        </div>
        <div class="cart">
            <p>${this.res[j].shop}</p>
        </div> `
             } else {
                 continue
             }
         }
         this.center.innerHTML = str;
         /* 放大镜功能 */
         function BigImg() {
             // 1. 选择元素
             this.sBox = document.querySelector(".s_box")
             this.sSpan = document.querySelector(".s_box span")
             this.sImg = document.querySelector(".s_box img")
             this.bBox = document.querySelector(".b_box")
             this.bImg = document.querySelector(".b_box img")
             this.bImg.offsetWidth / this.bBox.offsetWidth == this.sImg.offsetWidth / this.sBox.offsetWidth;
             // 2. 执行绑定事件
             this.addEvent();
         }
         BigImg.prototype.addEvent = function () {
             const that = this;
             // 绑定进入事件：显示
             this.sBox.onmouseover = function () {
                 that.sSpan.style.display = "block";
                 that.bBox.style.display = "block";
             }
             // 绑定离开事件：隐藏
             this.sBox.onmouseout = function () {
                 that.sSpan.style.display = "none";
                 that.bBox.style.display = "none";
             }
             // 绑定移动事件：执行移动功能
             this.sBox.onmousemove = function (eve) {
                 const e = eve || window.event;
                 // 3. 执行移动功能
                 that.move(e)
             }
         }
         BigImg.prototype.move = function (e) {
             // 4. 先计算要移动的位置
             let l = e.pageX - this.sBox.offsetLeft - this.sSpan.offsetWidth / 2;
             let t = e.pageY - this.sBox.offsetTop - this.sSpan.offsetHeight / 2;
             // 5. 边界限定
             if (l < 0) l = 0;
             if (t < 0) t = 0;
             if (l > this.sBox.offsetWidth - this.sSpan.offsetWidth) {
                 l = this.sBox.offsetWidth - this.sSpan.offsetWidth
             }
             if (t > this.sBox.offsetHeight - this.sSpan.offsetHeight) {
                 t = this.sBox.offsetHeight - this.sSpan.offsetHeight
             }
             // 6. 设置给遮罩层
             this.sSpan.style.left = l + "px"
             this.sSpan.style.top = t + "px"
             // 7. 计算遮罩层移动的比例
             const x = l / (this.sBox.offsetWidth - this.sSpan.offsetWidth)
             const y = t / (this.sBox.offsetHeight - this.sSpan.offsetHeight)
             // console.log(x, y)
             // 8. 根据遮罩层移动的比例，计算右侧大图应该移动的距离
             this.bImg.style.left = (this.bBox.offsetWidth - this.bImg.offsetWidth) * x + "px";
             this.bImg.style.top = (this.bBox.offsetHeight - this.bImg.offsetHeight) * y + "px";
         }
         new BigImg();
     }
 }
 new List;